<template>
    <div class="nav-fixed bg-white">
        <div class="nav-default page-pad-pk d-flex-base-pk justify-content-between">
            <div v-for="(item,index) in items" :key="index" class="text-center nav-item" @click="handleTouch(index)">
                <img :src="isActive === index ? item.iconActive : item.icon" class="icon"/>
                <div :class="['font-size-12-pk title',isActive === index ? 'title-active' : 'title']" >{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NavTab",
        props:{
            active : {
                type:Number,
                default: 0
            }
        },
        data(){
            return{
                items:[
                    {
                        icon : require("@img/treasureTabDay.png"),
                        iconActive : require("@img/treasureTabDayActive.png"),
                        name : "天天夺宝",
                        path : "/treasure/index"
                    },
                    {
                        icon :  require("@img/treasureTabNew.png"),
                        iconActive :  require("@img/treasureTabNewActive.png"),
                        name : "最新开奖",
                        path : "/treasure/new"
                    },
                    {
                        icon :  require("@img/treasureTabMe.png"),
                        iconActive :  require("@img/treasureTabMeActive.png"),
                        name : "我的夺宝",
                        path : "/treasure/index"
                    }
                ],
                isActive: this.active
            }
        },
        methods:{
            handleTouch(index){
                if(this.active === index){
                    return false;
                }else{
                    this.isActive = index;
                    this.$router.push({
                        path : this.items[index].path
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "treasure";
.nav-fixed{
    position: fixed;
    bottom: 0;
    width: 100%;
    .nav-default{
        border-top: 1px solid $light;
        padding:5px 15px;
        align-items: center;
        .nav-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            .icon{
                width: 8vw;
                height: 8vw;
                display: block;

            }
            .title{
                color: $gray-600;
            }
            .title-active{
                color: $orange;
            }
        }
    }
}
</style>